<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
	  xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">

<ui:composition template="/layouts/default.xhtml">
	<ui:define name="title">#{text['centroNuevo.title']}</ui:define>
	<ui:param name="menu" value="AdminMenu"/>
	<body id="signup">
		<ui:define name="body">
			<div class="col-sm-2">
				<h2>#{text['centroList.heading']}</h2>
				#{text['centroNuevo.message']}
			</div>
			<div class="col-sm-7">
				<h:form id="centroNuevoForm" styleClass="well" autocomplete="off">
					<div class="form-group">
						<h:outputLabel styleClass="control-label" for="nombre" value="#{text['centroNuevo.nombre']}"/>
						<h:inputText styleClass="form-control" value="#{centroAction.centro.nombre}" id="nombre" required="true"/>
						<p:message for="nombre"/>
					</div>
					
					<div class="form-group">
						<h:outputLabel styleClass="control-label" for="nombreComercial" value="#{text['centroNuevo.nombreComercial']}"/>
						<h:inputText styleClass="form-control" value="#{centroAction.centro.nombreComercial}" id="nombreComercial" required="false"/>
						<p:message for="nombreComercial"/>
					</div>
					
					<div class="row">
						
						<div class="col-sm-6 form-group">
							<h:outputLabel styleClass="control-label" for="telefono1" value="#{text['centroNuevo.telefono1']}"/>
							<h:inputText styleClass="form-control" value="#{centroAction.centro.telefono1}" id="telefono1" required="true">
								<!--  <f:validateRegex pattern="^\(?(\d{3})\)?[-| ]?(\d{3})[-| ]?(\d{4})$"/>-->
							</h:inputText>
							<p:message for="telefono1"/>
						</div>
						
						<div class="col-sm-6 form-group">
							<h:outputLabel styleClass="control-label" for="telefono2" value="#{text['centroNuevo.telefono2']}"/>
							<h:inputText styleClass="form-control" value="#{centroAction.centro.telefono2}" id="telefono2" required="false">
								<!--<f:validateRegex pattern="^\(?(\d{3})\)?[-| ]?(\d{3})[-| ]?(\d{4})$"/>-->
							</h:inputText>
							<p:message for="telefono2"/>
						</div>
					</div>
					
					<div class="form-group">
						<h:outputLabel styleClass="control-label" for="email" value="#{text['centroNuevo.email']}"/>
						<h:inputText styleClass="form-control" value="#{centroAction.centro.email}" id="email" required="true">
							<!-- Ref.: http://stackoverflow.com/questions/7875108/email-validation-using-regular-expression-in-jsf-2-primefaces -->
							<f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
							<!--f:validator validatorId="org.apache.myfaces.validator.Email"/-->
						</h:inputText>
						<p:message for="email"/>
					</div>

					<div class="form-group">
						<h:outputLabel styleClass="control-label" for="website" value="#{text['centroNuevo.website']}"/>
						<h:inputText styleClass="form-control" value="#{centroAction.centro.website}" id="website" required="false"/>
						<p:message for="website"/>
					</div>
					<div class="form-group">
						<h:outputLabel styleClass="control-label" for="personaContacto" value="#{text['centroNuevo.personaContacto']}"/>
						<h:inputText styleClass="form-control" value="#{centroAction.centro.personaContacto}" id="personaContacto" required="true"/>
						<p:message for="personaContacto"/>
					</div>
					<div class="row">
						<div class="col-sm-6 form-group">
							<h:outputLabel styleClass="control-label" for="educadorasRecibenComunic" value="#{text['centroDetalle.educadorasRecibenComunic']}"/>
							<h:selectOneRadio layout="lineDirection" id="educadorasRecibenComunic"
									value="#{centroAction.centro.educadorasRecibenComunic}" required="true">
								<f:selectItem itemValue="false" itemLabel="No"/>
								<f:selectItem itemValue="true" itemLabel="Si"/>
							</h:selectOneRadio> 
						</div>
						<div class="col-sm-6 form-group">
							<h:outputLabel styleClass="control-label" for="fechaActivacion" value="#{text['centroDetalle.fechaActivacion']}"/>
							<p:calendar value="#{centroAction.centro.fechaActivacion}" mode="popup" showOn="button"/>  
						</div>
					</div>
					<div class="form-group form-actions">
						<h:commandButton value="#{text['button.register']}" action="#{centroAction.centroSave}" id="save"
										 styleClass="btn btn-primary"/>
						<h:commandButton value="#{text['button.cancel']}" action="/home.xhtml" immediate="true" id="cancel"
										 styleClass="btn btn-default"/>
					</div>
				</h:form>
			</div>
		</ui:define>
	</body>
</ui:composition>
</html>
